<template>
  <div class="complain">
    <!-- 按钮组: 添加 / 删除选中 -->
    <el-row class="btns" style="margin: 20px">
      <el-card class="complain-table">
        <el-table border stripe :data="complainData">
          <el-table-column label="id" prop="id"></el-table-column>
          <el-table-column label="姓名" prop="name"></el-table-column>
          <el-table-column label="邮箱" prop="email"></el-table-column>
          <el-table-column label="联系方式" prop="tele"></el-table-column>
          <el-table-column label="建议内容" prop="content"></el-table-column>
          <el-table-column label="操作">
            <template v-slot="complain">
              <el-button
                type="danger"
                size="mini"
                @click="removeComplain(complain.row.id)"
              >
                删除
                <i class="el-icon-delete"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-sizes="[1, 5, 10]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-card>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Complain',
  data() {
    return {
      complainData: [], //表格数据
      page: 1, // 当前的页码数
      pagesize: 5, // 每页显示记录数
      total: 0, //当前类别/所有类别文章数
    }
  },
  created() {
    this.getComplain()
    this.getTotal()
  },
  methods: {
    async getComplain() {
      const {
        result: { feedbacks },
      } = await this.$http.get('/API/V1/admin/feedbacks', {
        params: {
          pagesize: this.pagesize,
          offset: (this.page - 1) * this.pagesize,
        },
      })
      this.complainData = feedbacks
      console.log(feedbacks)
    },
    async getTotal() {
      const { total } = await this.$http.get('/API/V1/admin/feedbacks')
      this.total = total
    },

    async removeComplain(id) {
      const result = await this.$http.delete('/API/V1/admin/feedbacks/' + id)
      this.$message.success('成功删除投诉')

      this.getComplain()
      this.getTotal()
    },
    handleSizeChange(val) {
      this.pagesize = val
      this.getComplain()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getComplain()
    },
  },
}
</script>
<style>
.el-row {
  margin-top: 10px;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0);
}
</style>
